Chart.js ব্যবহার করে একটি চার্ট তৈরি করার জন্য সাধারণত কিছু মূল উপাদান প্রয়োজন হয়, যেমন HTML, JavaScript এবং কিছু কনফিগারেশন। নিচে Chart.js এর বেসিক স্ট্রাকচার সম্পর্কে বিস্তারিতভাবে আলোচনা করা হলো, যাতে আপনি সহজেই একটি চার্ট তৈরি করতে পারেন।
HTML ফাইল (Canvas)
Chart.js একটি <canvas> ট্যাগ ব্যবহার করে চার্ট রেন্ডার করে। তাই প্রথমে HTML ফাইলে একটি <canvas> এলিমেন্ট তৈরি করতে হবে।
HTML স্ট্রাকচার:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Example</title>
</head>
<body>
<h1>My First Chart.js Chart</h1>
<!-- Chart.js Canvas -->
<canvas id="myChart" width="400" height="200"></canvas>
<!-- Chart.js Library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Custom Script for Chart -->
<script src="script.js"></script>
</body>
</html>
<canvas>: এখানে আমরা একটি<canvas>এলিমেন্ট তৈরি করেছি, যেখানে আমাদের চার্ট রেন্ডার হবে।id="myChart"এই এলিমেন্টের মাধ্যমে আমরা JavaScript থেকে এটি অ্যাক্সেস করতে পারব।
JavaScript ফাইল (Chart.js কনফিগারেশন)
Chart.js এর সাথে কাজ করার জন্য JavaScript কোডে কনফিগারেশন এবং ডেটা সেট করতে হবে। এখানে আমরা Chart কনস্ট্রাকটর ব্যবহার করে একটি নতুন চার্ট তৈরি করব।
JavaScript স্ট্রাকচার:
// Get the context of the canvas element
const ctx = document.getElementById('myChart').getContext('2d');
// Create the chart
const myChart = new Chart(ctx, {
type: 'bar', // Chart type (Bar chart)
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], // X-axis labels
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5, 2], // Data points for Y-axis
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true, // Make the chart responsive
scales: {
y: {
beginAtZero: true // Start the Y-axis from zero
}
}
}
});
ctx: এটি আমাদের<canvas>এলিমেন্টের context, যা Chart.js কে নির্দেশ দেয় যেখানে চার্ট রেন্ডার হবে।Chartকনস্ট্রাকটর: এটি চার্ট তৈরি করার জন্য ব্যবহৃত হয়। প্রথম প্যারামিটার হলctxএবং দ্বিতীয় প্যারামিটার হল কনফিগারেশন।type: এটি চার্টের ধরন (যেমন বার চার্ট, লাইন চার্ট, পাই চার্ট ইত্যাদি) নির্দেশ করে।data: এখানে চার্টের ডেটা এবং এক্স-অক্ষ ও ওয়াই-অক্ষের লেবেল উল্লেখ করা হয়।labels: এক্স-অক্ষের লেবেল (এখানে 'Red', 'Blue' ইত্যাদি)।datasets: একাধিক ডেটাসেট থাকতে পারে, যেখানে ডেটা পয়েন্টের মান এবং তাদের স্টাইল উল্লেখ করা হয়।
options: এটি চার্টের কাস্টমাইজেশন অপশনসমূহ যেমন রেসপন্সিভ ডিজাইন, অ্যানিমেশন, স্কেল ইত্যাদি কনফিগার করার জন্য ব্যবহৃত হয়।
কাস্টমাইজেশন অপশন (Options)
Chart.js ব্যবহার করে চার্ট কাস্টমাইজ করা যায় বিভিন্ন অপশন দিয়ে, যেমন স্কেল, অ্যানিমেশন, লেজেন্ড, টুলটিপস ইত্যাদি।
উদাহরণ:
responsive: চার্ট রেসপন্সিভ হয়ে স্ক্রিন সাইজের সাথে মানিয়ে যাবে।scales: এক্স ও ওয়াই অক্ষের স্কেল কনফিগারেশন।tooltips: টুলটিপস প্রদর্শন করার জন্য কনফিগারেশন।legend: লেজেন্ডের কনফিগারেশন।
options: {
responsive: true,
plugins: {
legend: {
display: true, // Show the legend
position: 'top' // Position of the legend (top, left, etc.)
},
tooltip: {
enabled: true // Enable tooltips
}
},
scales: {
y: {
beginAtZero: true // Start Y-axis at zero
}
}
}
সারাংশ
Chart.js এর বেসিক স্ট্রাকচার অনেকটা নিম্নলিখিতভাবে কাজ করে:
- HTML:
<canvas>এলিমেন্ট তৈরি করে চার্ট দেখানোর জন্য। - JavaScript:
Chartকনস্ট্রাকটর ব্যবহার করে চার্ট তৈরি এবং কনফিগারেশন। - Options: চার্ট কাস্টমাইজেশন (যেমন রেসপন্সিভ ডিজাইন, স্কেল, টুলটিপস)।
এটি একটি খুবই শক্তিশালী এবং ব্যবহারযোগ্য টুল যা ডেটা ভিজ্যুয়ালাইজেশনকে সহজ এবং দৃষ্টিনন্দন করে তোলে।
Read more
